<template>
	<view class="page">
		<view class="name2">
			<text class="name2_1">{{info.sname}} {{info.dir}}</text>
		</view>
		<u-form :model="info" ref="uForm" class="form">
			<u-form-item prop="keynum" label="钥匙号" label-width="160rpx">
				<u-input v-model="info.keynum" placeholder="请输入钥匙号" type="string" :clearable="true"></u-input>
			</u-form-item>
			<u-form-item prop="ammeter" label="电表位置" label-width="160rpx">
				<u-input v-model="info.ammeter" placeholder="请输入电表位置" type="string" :clearable="true"></u-input>
			</u-form-item>
			<u-form-item prop="cardnum" label="IP(卡号)" label-width="160rpx">
				<u-input v-model="info.cardnum" placeholder="请输入IP(卡号)" type="string" :clearable="true"></u-input>
			</u-form-item>
			<u-form-item prop="beizhu" label="备注" label-width="160rpx">
				<u-input v-model="info.beizhu" placeholder="请输入备注" type="string" :clearable="true"></u-input>
			</u-form-item>
			<u-form-item label="位置校准" prop="locate" label-width="160rpx">
				<!-- <u-input suffixIcon="map" disabled @clike="toLocate"></u-input> -->
				<!-- #ifndef APP-NVUE -->
				<u-input v-model="info.address" disabled>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input disabled>
						<!-- #endif -->
						<template slot="suffix">
							<u-button @tap="toLocate" text="定位" type="success" size="mini"></u-button>
						</template>
						<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			</u-form-item>
		</u-form>
		<view class="btn">
			<u-button @click="submit" type="primary" text="提交" />
		</view>
	</view>
</template>

<script>
	import {
		device_info
	} from '@/api/common.js';
	export default {
		data() {
			return {
				info: {}
			}
		},
		onLoad: function(option) {
			console.log("onLoad:" + option.info)
			this.info = JSON.parse(option.info)
			this.info.address = this.info.longitude + ',' + this.info.latitude
		},
		methods: {
			toLocate() {
				console.log('准备定位：');
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.info.address = res.longitude + ',' + res.latitude
						that.info.longitude = res.longitude 
						that.info.latitude =  res.latitude
					},
					fail() {
						console.log('定位失敗')
					}
				});
			},
			submit() {
				console.log('提交設備信息...')
				device_info(this.info).then(res => {
					uni.showToast({
						title: "修改成功",
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 500)
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 84vw;
		margin-left: 8vw;
		margin-top: 10vh;
	}

	.btn {
		margin-top: 4vh;
	}


	.name2 {
		height: 120rpx;
		width: 84vw;
		@include flex();
		margin-bottom: 4vh;

		.name2_1 {
			color: $font-color;
			font-size: 40rpx;
			width: 100vw;
			text-align: center;
		}
	}
</style>